import { Button, Space, Image } from "antd";
import { money } from "@/utils/money";

export const useColumns = ({ deleteCar, addCollect }) => {
    return [
        {
          title: '商品',
          dataIndex: 'name',
          render: (_, record) => {
            return (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Image width={40} height={40} preview={false} src={record?.skuPicture} />
                <div style={{ marginLeft: 10 }}>{ record?.skuName }</div>
              </div>
            )
          }
        },
        {
          title: '单价',
          dataIndex: 'price',
          render: (_, record) => {
            return (
              <div>
                ¥ { money(record?.price) }
              </div>
            )
          }
        },
        {
          title: '数量',
          dataIndex: 'quantity',
        },
        {
          title: '操作',
          dataIndex: 'action',
          render: (_, record) => {
            return (
              <Space direction="vertical" size={5}>
                <Button color="default" variant="link" onClick={() => deleteCar(record)}>删除</Button>
                <Button color="default" variant="link" onClick={() => addCollect(record)}>移入收藏</Button>
              </Space>
            )
          }
        },
      ];
}